<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EasyUI_Tree2</title>
    <link rel="stylesheet" type="text/css" href="../../../static/easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="../../../static/easyui/themes/icon.css"/>
    <link rel="stylesheet" type="text/css" href="../../../static/easyui/themes/demo.css"/>
    <script type="text/javascript" src="../../../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../../static/easyui/jquery.easyui.min.js"></script>
    <script>
        function getChecked() {
            var nodes=$("#tt").tree("getChecked");
            var checkedText="";
            for (var i=0;i<nodes.length;i++){
                checkedText+=nodes[i].text+",";
            }
            alert(checkedText);
        }
        function cascadeAction() {
            $('#tt').tree({
                cascadeCheck:$(this).is(':checked')
            });
        }
        function onlyLeafWorks() {
            $('#tt').tree({
                onlyLeafCheck:$(this).is(':checked')
            });
        }
    </script>
</head>
<body>
    <h2>CheckBox Tree</h2>
    <div style="margin: 20px 0;">
        <a class="easyui-linkbutton" onclick="getChecked()">GetChecked</a>
    </div>
    <div style="margin: 10px 0">
        <input type="checkbox" checked onchange="cascadeAction()"/>CascadeCheck
        <input type="checkbox" onchange="onlyLeafWorks()"/>OnlyLeafCheck
    </div>
    <div class="easyui-panel" style="padding: 5px;">
        <ul id="tt" class="easyui-tree" data-options="animate:'true',checkbox:'true'">
            <li data-options="state:'closed'">
                <span>科目</span>
                <ul>
                    <li>语文</li>
                    <li>数学</li>
                    <li>英语</li>
                    <li>物理</li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>国家</span>
                <ul>
                    <li>中国</li>
                    <li>俄罗斯</li>
                    <li>美国</li>
                </ul>
            </li>
            <li data-options="state:'closed'">
                <span>武器</span>
                <ul>
                    <li>刀</li>
                    <li>枪</li>
                    <li>火炮</li>
                </ul>
            </li>
            <li value="fourth">第四天</li>
        </ul>
    </div>
</body>
</html>